Skip to content

feat(app): restyle revert dock for v2#35560

Merged
Brendonovich merged 4 commits into
devfrom
revert-dock-v2-tweaks
Jul 9, 2026
Merged

feat(app): restyle revert dock for v2#35560
Brendonovich merged 4 commits into
devfrom
revert-dock-v2-tweaks

Conversation

@usrnk1

@usrnk1 usrnk1 commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

Issue for this PR

Closes #

Type of change

  • Bug fix
  • New feature
  • Refactor / code improvement
  • Documentation

What does this PR do?

Restyles the composer "rolled back messages" dock (SessionRevertDock) to the v2 design so it matches the v2 release.

  • Swaps the legacy DockTray / Button / IconButton for ButtonV2 / IconV2 / IconButtonV2 and moves colors, spacing, radius and typography onto the --v2-* tokens from Figma (layer-01 surface, base border, muted icon/text, 42px header, 16px insets, v2 neutral restore button).
  • Adds an outline-reset icon to the v2 icon sprite and shows it before the "N rolled back messages" heading, to visually separate the summary row from the message list.
  • Keeps a v1/v2 split (same pattern as the timeline work): the v2 markup renders when settings.general.newLayoutDesigns() is on, and the original DockTray rendering stays as the fallback, so prod (v1 layout) is unchanged.

The tricky part is the layout: the composer input overlaps the dock's bottom by 18px (session-composer-region-controller.ts lift()). The first pass clipped the header (collapsed) and the last restore row (expanded). The fix keeps a dedicated 18px "sacrificial" spacer that is the only thing the composer overlaps, and puts it outside the scroll viewport so scrolling rows can never hide behind the composer.

How did you verify your code works?

  • Per-package bun typecheck while iterating, plus the full turbo typecheck that runs on push (all 30 packages pass).
  • Added a Storybook story (Composer/Revert Dock) that renders the real dock above a mock composer card reproducing the 18px overlap, with a Layout toggle to preview both the v2 and v1 fallback. onRestore only mutates local story state, so the collapsed/expanded/scroll cutoff behavior can be checked in isolation.
  • Verified collapsed, expanded, and the 6-item scrolling case against the Figma frames.

Screenshots / recordings

Storybook: Composer/Revert Dock (1 rolled back, 3 rolled back, 6 rolled back (scrolls)). Figma reference: Desktop Q3 2026, node 22-2835.

Checklist

  • I have tested my changes locally
  • I have not included unrelated changes in this PR

@usrnk1 usrnk1 marked this pull request as ready for review July 8, 2026 18:30
@usrnk1 usrnk1 requested review from Brendonovich and Hona as code owners July 8, 2026 18:30
@Brendonovich Brendonovich merged commit 4f9207d into dev Jul 9, 2026
15 of 16 checks passed
@Brendonovich Brendonovich deleted the revert-dock-v2-tweaks branch July 9, 2026 08:06
anduimagui pushed a commit to anduimagui/opencode that referenced this pull request Jul 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants